<template>
    <div>
        <div class="mui-content">
            <form class="mui-input-group" :model="loginForm" ref="loginForm">
                <div class="mui-input-row">
                    <label>账号</label>
                    <input
                            v-model="loginForm.username"
                            type="text"
                            class="mui-input-clear"
                            placeholder="请输入用户名"
                    />
                </div>
                <div class="mui-input-row">
                    <label>密码</label>
                    <input
                            v-model="loginForm.password"
                            type="password"
                            class="mui-input-password"
                            placeholder="请输入密码"
                    />
                </div>
            </form>
            <div class="mui-content-padded">
                <button
                        @click="handleLoginIn"
                        class="mui-btn mui-btn-block mui-btn-primary"
                >
                    登录
                </button>
                <div class="link-area" @click="goSignUp">还没有注册，去注册</div>
            </div>
        </div>
    </div>
</template>

<script>
    // eslint-disable-next-line no-unused-vars
    import { Toast } from "mint-ui";
    // import { mixin } from "../../mixins";
    // eslint-disable-next-line no-unused-vars
    import { loginIn }  from "../utils/index";
    export default {
        name: "LoginIn",
        data() {
            return {
                loginForm: {
                    username: "",
                    password: "",
                },
            };
        },
        methods: {
            handleLoginIn() {
                let _this = this;
                let params = new URLSearchParams();
                params.append("username", this.loginForm.username);
                params.append("password", this.loginForm.password);
                loginIn(params)
                    .then((res) => {
                        if (res.code === 1) {
                            Toast({
                                message: "登录成功",
                                iconClass: "mui-icon mui-icon-checkmarkempty",
                            });
                            console.log(res)
                            // 提交信息到vuex中
                            _this.$store.commit("setLoginIn", true);
                            _this.$store.commit("setUserId", res.userMsg.id);
                            _this.$store.commit("setUsername", res.userMsg.username);
                            _this.$store.commit("setAvator", res.userMsg.avator);
                            setTimeout(function () {
                                _this.$router.push({ path: "/mine" });
                            }, 2000);
                        } else {
                            Toast({
                                message: "用户名或密码错误",
                                iconClass: "mui-icon mui-icon-closeempty",
                            });
                        }
                    })
                    // eslint-disable-next-line no-unused-vars
                    .catch((err) => {
                        Toast({
                            message: "无法连接到服务器",
                            iconClass: "mui-icon mui-icon-spinner-cycle mui-spin",
                        });
                    });
            },
            goSignUp() {
                this.$router.push({ path: "/sign-up" });
            },
        },
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    .mui-input-group {
        margin-top: 10px;
        background-color: transparent;
    }

    .mui-input-group label {
        width: 22%;
    }

    .mui-input-row:last-child {
        background: #fff;
    }

    .mui-input-row {
        margin-top: 20px;
        background: #fff;
    }

    .mui-input-row label ~ input,
    .mui-input-row label ~ select,
    .mui-input-row label ~ textarea {
        width: 78%;
    }

    .link-area {
        display: block;
        margin-top: 25px;
        text-align: center;
        color: $color-blue-dark;
    }

    .mui-content-padded {
        margin-top: 30px;
    }




</style>
